<template>
    <div>
        <Header />
        <el-container class="container">
            <el-main class="main">
                <div class="frontend-infos">
                    <div class="custom-style mt30 ml20"><el-segmented @change="handleClick" v-model="form.type_id" :options="typeData" size="large" /></div>
                    <el-row :gutter="30" class="course-list">
                        <el-col v-for="item in tableData" :key="item.id" :span="6">
                            <el-card shadow="always" @click="router.push({ name: 'productShow', params: { id: item.id } })">
                                <el-image style="width: 100%" :src="item.cover" fit="contain" />
                                <div class="title line-clamp2">
                                    <el-text size="large" tag="b">{{ item.title }}</el-text>
                                </div>
                                <div class="brief line-clamp2"><el-text type="info" size="small">{{ item.brief }}</el-text></div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <div class="el-pagination-div">
                        <el-pagination background  @current-change="handleCurrentChange" :default-page-size="12" layout="prev, pager, next" :total="form.total" />
                    </div>
                </div>
            </el-main>
        </el-container>
        <Footer />
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'

import { onMounted, ref } from 'vue'
import router from '../../router'
import http from '../../util/request'

const form = ref<any>({search:'',type_id:0,page:0,pageSize:12,total:0})

interface Item {
    id:number,
    title:string
    cover:string
    brief:string
    price:number
}

const tableData = ref<Item[]>([]);

interface type {
    id:number,
    title:string
}

const typeData = ref<type[]>([]);

const onGetData = () => {
    http.post('/product',form.value).then((response:any)=>{
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const handleCurrentChange = (current:number) => {
    form.value.page = current
    onGetData()
}

const onGetType = () => {
    http.post('/type',{model:'Product'}).then((response:any)=>{
        response.data.data.forEach((e:any) => {
            e.value = e.id
            e.label = e.title
        });
        response.data.data.unshift({label:'全部',value:0})
        typeData.value = response.data.data
        onGetData()
    })
}

onMounted(()=>{
    onGetType()
})

const handleClick = (data: number) => {
    form.value.type_id = data
    form.value.page = 1
    onGetData()
}
</script>

<style scoped lang="scss">
.main {
    padding: 0px;
}
.tip {
    padding: 0px 15px;
}

.course-list {
    padding: 15px;
    .el-card {
        margin-bottom: 30px;
    }
}
</style>
